<!--
 @Description:商品item
 @author:张静
 @createTime: 2022-7-5 10:37:04 ?F10: AM?
 -->
<template>
	<view class="goods-item card u-flex" :style="{ padding: pd, marginBottom: mt }">
		<div
			@tap="details"
			class="imgbox"
			:style="{
				width: imgWidth,
				height: imgheight
			}"
		>
			<image :src="`${info.img_url[0]}?imageView2/0/w/140`" mode="aspectFill"></image>
			<view class="video" v-if="info.video_url && info.video_url != 'null'"><image :src="`${assetsPath}/video.png`" mode="widthFix"></image></view>
		</div>
		<div class="flex-sub u-flex u-flex-column u-relative">
			<div class="u-flex u-row-between align-center">
				<div class="name flex-sub" @tap="details">
					<span class="limittag" v-if="info.is_shipping == 1">包邮</span>
					{{ info.name }}
					<text class="text-primary ml10">({{ info.product_dengji_ }})</text>
				</div>
				<view @tap="follow" class="fav flex align-center justify-center" :class="{ active: info.product_is_follow }" v-if="showFav">
					<image v-if="!info.product_is_follow" :src="`${assetsPath}/fav.png`" mode="widthFix"></image>
					<text>{{ info.product_is_follow ? '已' : '' }}关注</text>
				</view>
			</div>
			<template v-if="state == 1">
				<div class="info">
					<text>{{ info.product_guige_ }}</text>
					<text class="ml20">{{ info.product_changdu_ }}</text>
				</div>
				<view class="tags flex-sub flex flex-wrap"><image v-for="(tag, idx) in info.lable" :key="idx" :src="tag.img_url" mode="heightFix"></image></view>
				<view class="flex align-center">
					<div class="price">
						<text class="unit">￥</text>
						{{ info.price }}
					</div>
					<image
						class="vip"
						:src="`${assetsPath}/vip.png`"
						mode="widthFix"
						v-if="info.is_green_price == 1 && ((userInfo && userInfo.grade_id == 2 && !showFav) || showFav)"
					></image>
				</view>
				<numberbox v-if="valueKey == 'qty'" v-model="info.qty || 0" class="num" @change="({ value }) => inputCar(value)" :max="info.stock"></numberbox>
				<numberbox v-else v-model="info.cart_num || 0" class="num" @change="({ value }) => inputCar(value)" :max="info.stock"></numberbox>
			</template>
			<view v-else class="state">商品已下架或无库存</view>
		</div>
	</view>
</template>

<script>
import numberbox from './numberbox';
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
	name: 'goods-item',
	data() {
		return {
			fav: true
		};
	},
	components: { numberbox },
	props: {
		info: {
			type: [Object],
			default: () => {}
		},
		index: {
			type: [String, Number],
			default: 0
		},
		imgWidth: {
			type: [String, Number],
			default: uni.upx2px(190) + 'px'
		},
		imgheight: {
			type: [String, Number],
			default: uni.upx2px(190) + 'px'
		},
		showFav: {
			type: Boolean,
			default: !0
		},
		pd: {
			type: [String, Number],
			default: uni.upx2px(20) + 'px'
		},
		mt: {
			type: [String, Number],
			default: uni.upx2px(20) + 'px'
		},
		valueKey: {
			type: String,
			default: 'qty'
		},
		state: {
			type: [String, Number],
			default: 1
		}
	},
	computed: {
		...mapState(['userInfo']),
		pid() {
			return this.info.pid || this.info.id;
		}
	},
	methods: {
		...mapActions(['getCarCount']),
		details() {
			this.$Router.push({
				path: '/pages/goodsdetails/goodsdetails?id=' + this.pid
			});
		},
		inputCar(num) {
			this.$postAction(
				this.$api.inputCar + this.pid,
				{
					num
				},
				{
					custom: {
						ShowLoading: false
					}
				}
			).then(da => {
				if (da.code == 0) {
					this.$emit('changeNum', {
						num,
						index: this.index
					});
					this.getCarCount();
				}
			});
		},
		follow() {
			let url = this.info.product_is_follow ? this.$api.delFollow : this.$api.addFollow;
			this.$postAction(url + this.pid).then(da => {
				if (da.code == 0) {
					this.$emit('delItem', this.index);
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.goods-item {
	padding: 20upx;
	margin-bottom: 20upx;
	.imgbox {
		width: 190upx;
		height: 190upx;
		margin-right: 20upx;
		border-radius: 8upx;
		overflow: hidden;
		position: relative;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
		.video {
			width: 32upx;
			height: 32upx;
			position: absolute;
			right: 5upx;
			bottom: 5upx;
		}
	}

	.name {
		color: $u-main-color;
		font-size: 32upx;
		font-weight: 500;
		line-height: 1;
		.limittag {
			display: inline-block;
			padding: 4upx 6upx;
			color: var(--nav-bg);
			border-radius: 4upx;
			border: 1px solid var(--nav-bg);
			font-size: 18upx;
			line-height: 1;
			margin-right: 5upx;
			vertical-align: middle;
		}
	}

	.info {
		color: #969696;
		font-size: 22upx;
	}
}
.price {
	.unit {
		font-size: 24upx;
	}
	color: var(--nav-bg);
	font-size: 32upx;
}
.vip {
	width: 65upx;
	height: 25upx;
	margin-left: 4upx;
}
.num {
	position: absolute;
	bottom: 0;
	right: 0;
}
.fav {
	width: 130upx;
	height: 56upx;
	background: #fff;
	border-radius: 30upx;
	border: 1px solid var(--nav-bg);
	color: var(--nav-bg);
	image {
		display: block;
		width: 26upx;
		height: 23upx;
		margin-right: 7upx;
		font-size: 26upx;
		font-weight: 500;
	}
	&.active {
		background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
		color: #fff;
		border: none;
	}
}
.tags {
	margin: 0 -10upx;
	image {
		display: block;
		width: 60upx;
		height: 32upx;
		margin: 10upx;
	}
}
.state {
	font-size: 24upx;
	color: #757575;
	line-height: 33upx;
	margin-top: 16upx;
}
</style>
